<template>
    <view class="schedule-details">
        <uni-nav-bar fixed left-icon="left" :title="title" @clickLeft="backHandle" class="unibarS">
		</uni-nav-bar>
        <!-- 内容 -->
        <view class="schedule-content">
            <view class="item">
                <view class="left">日程标题</view>
                <view class="right">与客户沟通报价事宜</view>
            </view>
            <view class="item">
                <view class="left">日程状态</view>
                <view class="right">执行中</view>
            </view>
            <view class="item">
                <view class="left">开始时间</view>
                <view class="right">2024-03-20 12:00</view>
            </view>
            <view class="item">
                <view class="left">结束时间</view>
                <view class="right">2024-03-20 12:00</view>
            </view>
            <view class="item">
                <view class="left">紧要程度</view>
                <view class="right">重要</view>
            </view>
            <view class="item">
                <view class="left">关联业务</view>
                <view class="right">客户名称</view>
            </view>
            <view class="item">
                <view class="left">负责人员</view>
                <view class="right">赵小刚</view>
            </view>
            <view class="item">
                <view class="left">任务提醒</view>
                <view class="right">准时</view>
            </view>
            <view class="item">
                <view class="left">提醒方式</view>
                <view class="right">系统通知</view>
            </view>
            <view class="item">
                <view class="left">创建时间</view>
                <view class="right">2024-03-20 12:00</view>
            </view>
            <view class="item">
                <view class="left">最后更新</view>
                <view class="right">2024-03-20 12:00</view>
            </view>
        </view>
        <!-- 操作 -->
         <view class="operation">
            <view @click="show = true">
                <uni-icons type="tune" size="22"></uni-icons>
                <text>变更状态</text>
            </view>
            <view>
                <u-icon name="edit-pen" color="#000000FF" size="22"></u-icon>
                <text>编辑日程</text>
            </view>
            <view @click="showDelectModal = true">
                <u-icon name="trash" color="#000000FF" size="22"></u-icon>
                <text>删除日程</text>
            </view>
         </view>
         <!-- 选择变更状态 -->
         <u-action-sheet
            :actions="list"
            :closeOnClickOverlay="true"
            :closeOnClickAction="true"
            description="变更当前日程为"
            cancelText="取消"
            :show="show"
            @select="selectClick"
            @close="closeAction">
        </u-action-sheet>
        <!-- 确认删除 -->
        <u-modal
            :show="showDelectModal"
            closeOnClickOverlay
            showCancelButton
            title="确认删除"
            content='确定要删除该条记录吗？'
            @close="closeDelectModal"
            @cancel="closeDelectModal"
            @confirm="confirmDelect">
        </u-modal>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: '与客户沟通报价事宜',
            list: [
				{ name:'进行中', type: 1 },
				{ name:'已结束', type: 2 },
				{ name:'已取消', type: 3 }
			],
            show: false,
            showDelectModal: false,
        }
    },
    onLoad(options) {
        console.log(options)
    },
    methods: {
        closeAction() {
			this.show = false;
		},
        selectClick(item) {
            console.log(item)
        },
        closeDelectModal() {
            this.showDelectModal = false
        },
        confirmDelect() {
            uni.$u.toast('删除成功')
            this.showDelectModal = false
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
	.unibarS {
		/deep/.uni-navbar__header {
			padding: 0 32rpx;
		}
		/deep/.uni-navbar__content {
			border-bottom: none !important;
			box-shadow: 0px 0px 4px  rgba(136, 136, 136, 0.12);
		}
	}
    .schedule-details {
        display: flex;
        flex-direction: column;
        background: #F7F8FAFF;
        .schedule-content {
            overflow-y: auto;
            padding: 0 16rpx;
            margin-top: 20rpx;
            margin-bottom: 20rpx;
            border-radius: 24rpx;
            background: white;
            margin-bottom: 80px;
            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 24rpx 0;
                border-bottom: 1rpx solid #e5e5e5;
                .left {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: rgba(12, 16, 25, 1);
                    margin-right: 40rpx;
                }
                .right {
                    flex: 1;
                    font-size: 30rpx;
                    font-weight: 400;
                    color: rgba(100, 117, 136, 1);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    text-align: right;
                }
            }
        }
        .operation {
            background: white;
            height: 60px;
            line-height: 60px;
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            >view {
                flex: 1;
                text-align: center;
                display: flex;
                justify-content: center;
                > text {
                    margin-left: 8rpx;
                }
            }
        }
    }
</style>